<template>
<scroll class="suggest" :pullup="pullup"
:data="result" @srcpollToEnd="searchMore"
:beforeScroll='beforeScroll' @beforeScroll='listScroll' ref="suggest">
	<div class="suggest-list">
		<li @click="selectItem(item)" class="suggest-item hui flex item middle" v-for="item in result">
			<i class="iconfont icon-musicnote xxl mr10" :class="getIconCls(item)"></i>
			<div class="cell-main">
				<p class="l" v-html="getname(item)"></p>
			</div>
		</li>
      <loading v-show="hasMore" title=""></loading>
	</div>
  <div v-show="!hasMore && !result.length" class="no-result-wrapper">
      <no-result title="抱歉，暂无搜索结果"></no-result>
  </div>
</scroll>
</template>

<script type="text/ecmascript-6">
import {search} from 'api/search';
import {ERR_OK} from 'api/config';
import { createSong } from 'common/js/song';
import scroll from 'base/scroll/scroll'
import loading from 'base/loading/loading';
import Singer from 'common/js/singer';
import {mapMutations,mapActions} from 'vuex';
import NoResult from 'base/Noresult/no-result'
const TYPE_SINGER='singer'
const perpage = 20
export default{
  name:'',
    data(){
   return{
   	page:1,
   	result:[],
    pullup:true,
    hasMore:true,
    beforeScroll:true
  }
},
  props:{
  	query:{
  		type:String,
  		default:'',
  		result:[]
  	},
  	showSinger:{
  		type:Boolean,
  		default:true
  	}
  },
  watch:{
  	query(){
  		this.search()
  	}
  },
  methods:{
    // 选择搜索对象
    selectItem(item){
      // 判断 type 为 singer,构建对象,跳转
      if(item.type===TYPE_SINGER){
        const singer=new Singer({
          id:item.singermid,
          name:item.singername
        })
        this.$router.push({
          path:`/search/${singer.id}`
        })
        this.setSinger(singer)
      }else{
        this.insertSong(item)
      }
      this.$emit('select',item)
    },
    listScroll(){
      this.$emit('listScroll')
    },
    // 设置 Iconfont
  	getIconCls(item){
  	return item.type===TYPE_SINGER?`icon-fonts-user`:`icon-musicnote`
    },
    // 设置 name
  	getname(item){
  	return item.type===TYPE_SINGER?item.singername:`${item.name}-${item.singer}`
  	},
    refresh(){
      this.$refs.suggest.refresh()
    },
    // 搜索
  	search(){
      this.hasMore=true;
      this.page=1;
      this.$refs.suggest.scrollTo(0,0);
  		search(this.query,this.page,this.showSinger,perpage).then((res)=>{
  			if(res.code===ERR_OK){
  				this.result=this._dealData(res.data)
          this._checkMore(res.data)
  			}
  		})
    },
    //加载更多
    searchMore(){
      if(!this.hasMore){
        return
      }
      this.page++;
      search(this.query,this.page,this.showSinger,perpage).then((res)=>{
       if(res.code===ERR_OK){
          this.result=this.result.concat(this._dealData(res.data))
          this._checkMore(res.data)
        }
      })
    },
    // 判断是否有更多
    _checkMore(data){
      const song =data.song;
      if(!song.list.length||(song.curnum+song.curpage*perpage)>song.totalnum){
        this.hasMore=false
      }
    },
    // 格式话数据 
  	_dealData(data){
  	let ret =[];
  	if(data.zhida&&data.zhida.singerid){
  		ret.push({...data.zhida,...{type:TYPE_SINGER}})
  	}
  	if(data.song){
  		ret=ret.concat(this._normalizeSongs(data.song.list))
  	}
  	return ret
    },
    // 规则化
    _normalizeSongs(list) {
        let ret = []
        list.forEach((musicData) => {
          if (musicData.songid && musicData.albummid) {
            ret.push(createSong(musicData))
          }
        })
        return ret
      },
      ...mapMutations({
        setSinger: 'SET_SINGER'
      }),
      ...mapActions([
        'insertSong'
      ]),
  },

  components:{scroll,loading,NoResult}
}
</script>

<style rel="stylesheet" lang="less">
   .search-result{
   	    position: fixed;
    top: 150px;
    bottom: 0;
    width: 100%;
   }
   .suggest{
   	height: 100%;
   	overflow: hidden;
   }
   .no-result-wrapper{
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
   }
</style>
